<template>
        <el-input v-model="searchQuery" prefix-icon="el-icon-search" class="input-search" :placeholder="placeholderInput" @input="onInput" clearable></el-input>
</template>

<script>
    export default {
        props: {       
            tableDataInput: {
                type: Array,
                required: true
            },
            searchField: {
                type: String,
                default: 'commodityName'  // 设置默认值
            },
            placeholderInput:{
                type: String,
                default: ""
            } 
            
        },
        data() {
            return {
                searchQuery: '',
            }
        },
        computed: {
            filteredItems() {
                if (!this.searchQuery) {
                    return this.tableDataInput;
                }
                const query = this.searchQuery.toLowerCase();
                return this.tableDataInput.filter(item =>item[this.searchField].toLowerCase().includes(query)
                );
            }
        },
        methods: {
            onInput() {
                // this.$emit('search', this.filteredItems);
                this.$emit('search', this.searchQuery);
            }
        }
    };
</script>

<style>
.input-search .el-input__inner:hover {
    left: 264px;
    top: 91px;
    font-size: 16px;
    width: 241px;
    height: 38px;
    opacity: 1;
    border-radius: 80px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(211, 218, 230, 1);
    cursor:pointer
}

.input-search .el-input__inner {
    left: 264px;
    top: 91px;
    width: 241px;
    height: 38px;
    opacity: 1;
    border-radius: 80px;
    background: rgba(235, 238, 242, 1);
}
</style>